<!--
 * @Description: 监测点信息
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 韩静雯 3294295230@qq.com
 * @LastEditTime: 2025-09-26 15:28:00
-->
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
          </el-input>
          <el-tree @node-click="handlerClick" class="filter-tree" :data="EngData" :props="defaultProps"
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div v-if="params.id" class="table">
          <div class="engineer">工程信息</div>
          <div class="two">
            <el-form :inline="true">
              <el-col :span="12">
                <el-form-item  label="工程编号">{{ monitorData?monitorData.serial_number:''}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程名称">{{ monitorData? monitorData.engineer.name :"" }}</el-form-item>
              </el-col>
            </el-form>
            <el-form :inline="true">
              <el-col :span="12">
                <el-form-item label="工程类型">{{  monitorData ?monitorData.engineer.type :"" }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程状态">{{  monitorData? monitorData.engineer.status :"" }}</el-form-item>
              </el-col>
            </el-form>
            <el-form :inline="true">
              <el-col :span="12">
                <el-form-item label="开发时间">{{monitorData? monitorData.engineer.begin_time :"" }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间">{{ monitorData? monitorData.engineer.end_time:"" }}</el-form-item>
              </el-col>
            </el-form>
            <el-form>
              <el-form-item label="地址">{{ monitorData? monitorData.engineer.address:"" }}</el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="工程负责人">{{ monitorData? monitorData.engineer.charge_id:""  }}</el-form-item>
            </el-form>
          </div>
           <div class="equipment">设备信息</div>
          <div class="four">
            <el-form :inline="true">
              <el-col :span="12">
                <el-form-item label="工程设备">{{ monitorData ?monitorData.serial_number:"" }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称">{{  monitorData ?monitorData.name:""}}</el-form-item>
              </el-col>
            </el-form>
            <el-form :inline="true">
              <el-col :span="12">
                <el-form-item label="绑定状态">{{monitorData ? monitorData.bind_status:"" }}</el-form-item>
                <span></span>
              </el-col>
              <el-col :span="12">
                <el-form-item label="在线状态">{{ monitorData? monitorData.online_status:"" }}</el-form-item>
              </el-col>
            </el-form>
          </div> 
        </div>
        <div v-else style="line-height: 50px;color: red;font-size: 20px;text-align: center;">请点击设备查看数据</div>
        
      </el-col>
    </el-row>
  </div >

</template>


<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 表格数据源 
      monitorData:{},
      // 表单数据对象 
      form: { time: [] },
      // 树形结构展示数据 
      EngData: [],
      // 快捷选项配置项 
      params: {
        // page: 1,
        // pageSize: 5,
        // device_id: 0,
        id: 0
      },

    };
  },
  watch: {
    // 监听用户输入框输入的值并进行过滤 
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {},
  methods: {
    // 点击节点触发 
    handlerClick(val, node) {
      // console.log(val);
      // 判断点击的是设备  将设备id 工程id page pageSize传给后端 
      if (!val.children) {
        this.params.id = val.id;
        this.getMonitor();
      }
    },
    // 搜索 
    toSearch() {
      this.params.page = 1;
      this.getMonitor();
    },
    // 封装方法获取监测历史数据
    async getMonitor() {
      let temp = {
        ...this.params
      };
      let res = await get('/device/findDeviceDetail', temp);
      console.log(res, '-------');
      this.monitorData = res.data;
    },
    // 封装方法获取工程设备树 
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, '88888');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      // data是树形结构数据 
      if (!value) return true;
      // value输入框输入的值 
      // 返回就是包含输入框关键字的label(节点)  
      return data.name.indexOf(value) !== -1;
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex)
      if (rowIndex % 2 == 0 || rowIndex == 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
      return '';
    }
  },
  created() {
    this.getEngDevData();
    // this.getMonitor();
  },
};
</script>
<style lang="scss" scoped>
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
}

.left {
  padding-left: 10px;
}

.equipment {
  border: 1px solid #ececec;
  background-color: #ececec;
  font-size: 15px;
}

.two {
  padding-left: 15px;
  padding-top: 5px;
}

.four {
  padding-left: 15px;
  padding-top: 5px;
}
</style>
